<template>
  <div>
    <!-- 轮播图 -->
    <div class="lbt">
      <van-swipe class="my-swipe" indicator-color="white" :loop="false" :width="160" :show-indicators="false">
        <div v-for="(item, index) in hqjs" :key="index">
          <template>
            <!-- 渲染轮播图 -->
            <van-swipe-item @click="wca(item)">{{ item.cydc }}</van-swipe-item>
          </template>
        </div>
      </van-swipe>
    </div>

    <!-- 单词 -->
    <div class="dc">
      <van-row type="flex" justify="space-between">
        <van-col span="12" class="cydc"> {{ xxjh.cydc }}常用单词 </van-col>
        <van-col span="5" class="yb qcfd">
          <!-- 切换计划功能 暂时弃用 -->
          <!-- <div class="qhjh">
            <span @click="showPopup" class="bkjh">切换计划</span>
          </div> -->
        </van-col>
      </van-row>
      <!-- 进度条 -->
      <div class="jdt">
        <van-row type="flex" justify="space-between">
          <van-col span="4" class="bfb">
            <!-- 百分比 -->
            {{ bfbjs }}%
          </van-col>
          <van-col span="17" class="yx">已经学了{{ xxjh.yxdc }}个，共{{ xxjh.zgdc }}个单词</van-col>
        </van-row>
        <!-- percentage进度条,绑定了bfb动态变量 -->
        <van-progress :percentage="bfb" class="jd" :show-pivot="false" />
      </div>
    </div>
    <!-- 今日已学 -->
    <div class="jr">
      <van-row type="flex" justify="space-around" class="txjz">
        <van-col span="6" class="wjzj">
          {{ xxjh.jryx }}个
          <br />
          <span>今日已学</span>
        </van-col>
        <van-col span="6" class="wjzj">
          {{ xxjh.ljts }}天
          <br />
          <span>累计学习</span>
        </van-col>
      </van-row>
    </div>
    <!-- 开始学习按钮 -->
    <div>
      <!-- 传递id -->

      <router-link :to="{ path: 'ksxx', query: { id: id } }">
        <van-button style="background-color: #39a9ed" size="large" class="xxys">开始学习</van-button>
      </router-link>
    </div>
    <!-- 切换计划弹窗,切换计划功能 暂时弃用 -->
    <!-- <div>
      <van-popup v-model="show">
        <van-datetime-picker
          v-model="currentTime"
          type="time"
          :filter="filter"
        />
      </van-popup>
    </div> -->
  </div>
</template>

<script>
  import { mapState } from "vuex";
  export default {
    // 获取后端的轮播图单词本数据,注意该数据后期还要添加背景图地址
    data() {
      return {
        show: false,
        currentTime: "12:00",
        // 学习计划数据
        xxjh: {
          id: 1,
          cydc: "html", //常用单词标签
          yxdc: "13", //已学单词
          zgdc: "173", //总共单词
          jryx: "1", //今日已学
          ljts: "113", //累计天数
        },
        // 服务器获取的数据
        /*  hqjs: [
          {
            id: 1,
            cydc: "html", //常用单词标签
            yxdc: "13", //已学单词
            zgdc: "173", //总共单词
            jryx: "1", //今日已学
            ljts: "113", //累计天数
          },
          {
            id: 2,
            cydc: "css", //常用单词标签
            yxdc: "213", //已学单词
            zgdc: "213", //总共单词
            jryx: "21", //今日已学
            ljts: "2113", //累计天数
          },
          {
            id: 3,
            cydc: "js", //常用单词标签
            yxdc: "33", //已学单词
            zgdc: "373", //总共单词
            jryx: "3", //今日已学
            ljts: "33", //累计天数
          },
          {
            id: 5,
            cydc: "es6", //常用单词标签
            yxdc: "13", //已学单词
            zgdc: "73", //总共单词
            jryx: "4", //今日已学
            ljts: "13", //累计天数
          },
  
          {
            id: 4,
            cydc: "vue", //常用单词标签
            yxdc: "413", //已学单词
            zgdc: "473", //总共单词
            jryx: "4", //今日已学
            ljts: "413", //累计天数
          },
        ], */
        // 百分比
        bfb: 0,
        // 获取面板id,然后传递到开始学习页面
        id: 1,
      };
    },
    computed: {
      // 获取VueX的学习计划数据
      ...mapState(["hqjs"]),
      // 计算面板进度百分比
      bfbjs: function () {
        let num = this.xxjh.yxdc / this.xxjh.zgdc;
        num = Math.floor(num * 100);
        this.bfb = num;
        return num;
      },
    },
    methods: {
      wca(item) {
        /*  console.log(id);
        
        console.log(this.hqjs.find(val=>{return val.id==id})) */
        // 通过id里面this.hqjs里面的数据
        console.log(item);
        let sj = this.hqjs.find((val) => {
          return val.id == item.id;
        });
        // 渲染进度面板
        this.xxjh = sj;
        // 这里是编写的离线版，通过ID获取vuex的数据
        this.id = item.id;
        // 把进度面板保存到会话储存
        sessionStorage.setItem("xxjh", JSON.stringify(this.xxjh));

        // 保存轮播图滑动距离
        let a = document.querySelector(".van-swipe__track");
        sessionStorage.setItem("xltX", a.style.transform);
        console.log(a.style.transform);
      },
      showPopup() {
        this.show = true;
      },
      filter(type, options) {
        if (type === "minute") {
          return options.filter((option) => option % 5 === 0);
        }
        return options;
      },
    },
    mounted() {
      // 如果会话储存有学习计划数据，就赋值到this.xxjh和this.id上
      if (sessionStorage.getItem("xxjh") != null) {
        this.xxjh = JSON.parse(sessionStorage.getItem("xxjh"));
        console.log(this.xxjh, "xx");
        this.id = this.xxjh.id;
      }
      // 获取轮播图移动距离
      let hdjv = sessionStorage.getItem("xltX");
      if (hdjv != null) {
        console.log(hdjv);
        let box = document.querySelector(".van-swipe__track");
        box.style.transform = hdjv;
      }
    },
  };

 
</script>

<style lang="less" scoped>
  .qcfd:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    box-sizing: border-box;
    border: 2px solid white;
  }

  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }

  .dc {
    width: 95%;
    height: 140px;
    margin: auto;
    margin-top: 40px;
    background-color: rgb(228, 228, 28);
    border-radius: 10px 10px 0 0;
  }

  .lbt {
    margin-top: 20px;
  }

  .bk {
    border: 1px solid red;
  }

  .cydc {
    font-weight: bold;
    font-size: 18px;
    color: white;
    margin: 16px 0px 0px 5px;
    text-align: left;
  }

  .qhjh {
    float: right;
    /*  width: 75px;
  height: 25px;
  padding-bottom: 10px;
  line-height: 25px; */
    /* // 切换计划背景色 */
    background-color: rgb(155, 155, 155);
    color: white;
    text-align: center;
    border-radius: 14px;
    margin: 16px 5px 0px 0px;
  }

  .jdt {
    margin-top: 50px;
  }

  .jd {
    margin: auto;
    margin-top: 10px;
    width: 95%;
  }

  .bfb {
    margin: 6px 0px 0px 5px;
  }

  .yx {
    text-align: right;
    margin: 4px 5px 0px 0px;
  }

  .yb {
    font-size: 12px;
    font-weight: 700;
    line-height: 25px;
  }

  .jr {
    height: 100px;
    margin-top: 30px;
  }

  .wjzj {
    text-align: center;
    margin-top: 30px;
    font-weight: 700;
  }

  .wjzj span {
    font-size: 12px;
    font-weight: 400;
    color: rgb(180, 176, 176);
  }

  .xxys {
    position: fixed;
    color: white;
    font-size: 20px;
    bottom: 50px;
  }

  .bkjh {
    padding: 3.5px;
  }
</style>